<template>
  <div style="verflow: hidden">
    <div class="production">
      <van-swipe class="my-swipe" :show-indicators="false" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          >
          <van-image width="100%" lazy-load  class="productionImg" :src="require('./../../assets/oneImg1.png')" alt=""
        />
        </van-swipe-item>
        <van-swipe-item
          >
          <van-image width="100%" lazy-load    class="productionImg" :src="require('./../../assets/oneImg2.png')" alt=""
        />
        </van-swipe-item>
         <van-swipe-item
          >
          <van-image width="100%" lazy-load   class="productionImg" :src="require('./../../assets/oneImg3.png')" alt=""
        />
        </van-swipe-item>
      </van-swipe>
      <!-- <div>
                <img class="production_title" src="./../../assets/protitle.png" alt="">
            </div>
            <div>
                <div class="production_text_wrap">
                    <div class="production_text_left">
                        征集时间
                    </div>
                    <div class="production_text_right">
                        2021年7月15日-9月10日  
                    </div>
                </div>
                <div class="production_text_wrap">
                    <div class="production_text_left">
                        征集对象
                    </div>
                    <div class="production_text_right">
                        清远户籍的大学生及广东省职教城大学生  
                    </div>
                </div>
                <div class="production_text_wrap">
                    <div class="production_text_left">
                        内容要求
                    </div>
                    <div class="production_text_right">
                        以清城最“美”一刻为活动主题，包含但不限于清远最美的人与事、建党100周年纪念、党领导下的中国故事等，形式不限要求立意清晰，积极向上，弘扬主旋律，传递正能量，可以采用手机、相机、摄像机等设备进行拍摄，作品时长在5分钟以内。
                    </div>
                </div>
                <div class="production_text_wrap">
                    <div class="production_text_left">
                        版权要求 
                    </div>
                    <div class="production_text_right">
                        参赛作品须为参赛者原创作品，未侵犯任何他人的任何专利、著作权、商标权及其他知识产权，且未以任何形式进入商业渠道。否则，主办单位将取消其获奖资格，收回奖品及并保留追究法律责任的权利。
                    </div>
                </div>
                <div class="production_text_wrap1">
                    <div class="production_text_left">
                        奖项设置 
                    </div>
                    <div class="production_text_right1">
                        <div class="production_text_right1_main">
                            <img src="./../../assets/yidengjiang.png" alt="">
                            <div>
                                <div>奖金 5000 元</div>
                                <div>并颁发获奖证书</div>
                            </div>
                        </div>
                        <div class="production_text_right1_main">
                            <img src="./../../assets/erdengjiang.png" alt="">
                            <div>
                                <div>奖金 1000 元</div>
                                <div>并颁发获奖证书</div>
                            </div>
                        </div>
                        <div class="production_text_right1_main">
                            <img src="./../../assets/sandengjiang.png" alt="">
                            <div>
                                <div>奖金 500 元</div>
                                <div>并颁发获奖证书</div>
                            </div>
                        </div>
                    </div>
                    <div style="txt-align: center;color: white;width: 100%;">
                        <p style="font-size: 14px;">参与奖若干，清远景点门牌，并颁发获奖证书。</p>
                        <p style="font-size: 12px;">（注：获奖金者需按照国家规定缴纳个人所得税）</p>
                    </div>
                </div>
            </div> -->
    </div>
    <div class="vide_wrap_outsign">
      <div class="vide_wrap">
        <div style="margin-top: 0">
          <div class="video_title_wrap" style="padding-top: 10px">
            <div class="video_title__inner">
              <div class="c38866e">
                <img class="video_img" src="./../../assets/video.png" alt="" />
                <span>清城有我</span>
              </div>
            </div>
          </div>
          <div class="video_div">
            <video controls poster="./../../assets/video2.png">
              <source
                src="https://vlog-1251011106.cos.ap-guangzhou.myqcloud.com/16294678170301.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
        <div>
          <div class="video_title_wrap">
             <div class="video_title__inner">
              <div class="c38866e">
                <img class="video_img" src="./../../assets/video.png" alt="" />
                <span>清城有为</span>
              </div>
            </div>
          </div>
          <div class="video_div">
            <video controls poster="./../../assets/video1.png">
              <source
                src="https://vlog-1251011106.cos.ap-guangzhou.myqcloud.com/16299662100930825.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
        <div style="margin-bottom:0">
          <div class="video_title_wrap">
             <div class="video_title__inner">
              <div class="c38866e">
                <img class="video_img" src="./../../assets/video.png" alt="" />
                <span>清城有位</span>
              </div>
            </div>
          </div>
          <div class="video_div" style="margin-bottom:0">
            <video controls poster="./../../assets/video3.png">
              <source
                src="https://vlog-1251011106.cos.ap-guangzhou.myqcloud.com/16294672213673.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import wx from 'weixin-js-sdk';
export default {
  data() {
    return {
      shareLink:'https://vlog.sj0763.com/web',
      title:'清城区“凤聚英才、强区有我”短视频大赛',
      desc:'最高3000元奖金，快来参与！',
      img:'https://vlog.sj0763.com/share.jpeg'
    };
  },
  components: {},
  mounted(){
    this.init();
  },
  methods: {
    init() {
      const that = this;
      this.http
        .get("home/getwxinfo?url="+encodeURIComponent(window.location.href), {})
        .then((res) => {
          if(res.code != 1) return
          this.config = res.data;
          let {appId,nonceStr,signature,timestamp} = res.data
          let {shareLink,desc,title,img} = that
          wx.config({
              debug: false, // 开启调试模式,
              appId: appId, // 必填，企业号的唯一标识，此处填写企业号corpid
              timestamp: timestamp, // 必填，生成签名的时间戳
              nonceStr: nonceStr, // 必填，生成签名的随机串
              signature: signature, // 必填，签名，见附录1
              jsApiList: [
                  'updateAppMessageShareData',
                  'updateTimelineShareData',
                  'onMenuShareAppMessage',
                  'onMenuShareQQ',
                  'onMenuShareTimeline',
                  'onMenuShareQZone',
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.error(function(res){
            console.log(res);
          });
          wx.ready(() => {
              //需在用户可能点击分享按钮前就先调用
              wx.updateAppMessageShareData({
                  title: title, // 分享标题
                  desc: desc, // 分享描述
                  link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: img, // 分享图标
                  success: function() {},
                  cancel: function() {}
              });
              wx.updateTimelineShareData({
                  title: title, // 分享标题
                  link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: img, // 分享图标
                  success: function () {
                      // 设置成功
                  }
              })
          });
          wx.onMenuShareAppMessage({
              title: title, // 分享标题
              desc: desc, // 分享描述
              link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: img, // 分享图标
              type: 'link', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function() {}
          });
          wx.onMenuShareQQ({
              title: title, // 分享标题
              desc: desc, // 分享描述
              link: shareLink, // 分享链接
              imgUrl: img, // 分享图标
              success: function() {},
              cancel: function() {}
          });
          wx.onMenuShareTimeline({
              title: title, // 分享标题
              link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: img, // 分享图标
              success: function () {
                  // 用户点击了分享后执行的回调函数
              },
          });
          wx.onMenuShareQZone({
              title: title, // 分享标题
              desc: desc, // 分享描述
              link: shareLink, // 分享链接
              imgUrl: img, // 分享图标
              success: function () {
              },
              cancel: function () {
              }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.van-image__error, .van-image__loading{
  background-color: #b52c19;
}
</style>

<style scoped>
.vide_wrap_outsign {
  background: #c79563;
  /* padding:40px 2px; */
  padding: 8px 2px;
  margin: 0 4vw;
  border-radius: 20px;
}

.vide_wrap {
  border-radius: 20px;
  background: #a11e08;
  padding:10px 0;
  padding-bottom:20px;
}
.vide_wrap > div {
  margin: 20px;
}
.video_title_wrap {
  border-bottom: 1px solid #f6da91;
  text-align: left;
}
.video_title__inner {
  border: 1px solid #dea66b;
  border-radius: 20px;
  display: inline-block;
   margin-bottom: 10px;
}
.video_title_wrap .c38866e {
  /* border-bottom: 1px solid #d4d4d4; */
  display: flex;
  align-items: center;
  position: relative;
 padding: 0 10px;
  color: #f6da91;
  font-size: 24px;

 
}
/* .video_title_wrap .c38866e:after{
    content:'';
    position: absolute;
    top:26px;
    left:0;
    display: inline-block;
    width:95px;
    height:1px;
    background: #38866e;
} */
.video_div {
  padding: 20px 0;
  border-radius: 10px;
  margin: 13px 0 10px;
  background-color: #000;
}
.video_div > * {
  margin: auto;
  height: 100%;
  width: 100%;
}
.video_title_wrap span {
  font-size: 14px;
  color: #f2d28b;
  line-height: 26px;
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
}
.video_img {
  width: 13px;
  height: 10px;
}
.production {
  /* background-image: linear-gradient( #2dc5bf, #2dc599); */
  /* padding: 4vw; */
  margin: 0 4vw 0;
  border-radius: 6px;
  margin-top:-10px;
  min-height:200px;
}
.productionImg {
  /* height: 84vw; */
  width: 100%;
  margin: auto;
}
.production_title {
  width: 150px;
  display: inline-block;
  margin: 12px auto;
}
.production_text_wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: flex-start;
  border-bottom: 1px dashed #90cecb;
  padding: 3vw 0;
  font-size: 14px;
}
.production_text_wrap1 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  padding: 3vw 0;
}
.production_text_right1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 3vw 0;
  overflow: hidden;
  color: white;
  font-size: 12px;
}
.production_text_right1_main {
  flex: 0 1 30%;
}
.production_text_right1_main img {
  width: 100%;
}
.production_text_left {
  padding: 0 13px;
  background-color: white;
  color: #2dc5be;
  border-radius: 15px;
  line-height: 22px;
  margin: 0 3vw 0 0;
  flex: 0 1 19%;
}
.production_text_right {
  color: white;
  line-height: 22px;
  flex: 0 1 70%;
  text-align: left;
}



</style>
